<template>
    <el-card class="postCard">
        <template #header>
            <div class="card_header">
                <profile :imgSrc="userProfile"></profile>
                <div>
                    <div class="username_title">{{ userNickName }}</div>
                    <div class="postTime_tiele">{{ postTime }}</div>
                </div>
            </div>
        </template>
        <div class="card_content">
            {{ postContent }}
        </div>
        <img
            :src="imgItem.imgsrc"
            class="postImg"
            v-for="imgItem in imgList"
            alt=""
            loading="lazy"
            decoding="async"

        />
        <template #footer>
            <div class="postFooter">
                <div class="displayCenter">
                    <img :src="transmitImgSrc" class="post_foot_img"
                    >{{ postViews }}
                </div>
                <!-- <div class="displayCenter">
                    <res :src="commentImgSrc" class="post_foot_img"
                    @mouseover="handleMouseOver('comment')" @mouseleave="handleMouseLeave('comment')"
                    >{{ commentNum }}
                </div> -->
                <div class="displayCenter">
                    <img :src="likeImgSrc" class="post_foot_img"
                    @click="handleLike"
                    >{{ postLikes }}
                </div>
            </div>
        </template>
    </el-card>
</template>

<script setup>
import { ref,defineProps,toRefs } from 'vue';
import profile from '../top/profile.vue';
import { getImgList } from '@/apis/post'
import { UserInfoForPost } from '@/apis/banner.js'
import { getImgPrefix } from '@/apis/img'
import { likePost } from '@/apis/like'

const transmitImgSrc = ref('src/components/icons/view.png');
const commentImgSrc = ref('src/components/icons/comment.png');
const likeImgSrc = ref('src/components/icons/like.png');

// 帖子数据
const userProfile = ref('')
const userNickName = ref('')
const props = defineProps({
    postItem: Object
});
const {postItem} = toRefs(props);

const postId = ref(postItem.value.postId)
const postTitle = ref(postItem.value.postTitle)
const postContent = ref(postItem.value.postContent)
const postAuthor = ref(postItem.value.postAuthor)
const postTime = ref(postItem.value.postTime)
const postViews = ref(postItem.value.postViews)
const postLikes = ref(postItem.value.postLikes)

// 图片队列
const imgList = ref([])

// 加载帖子相关数据
// 加载帖子发表者信息
UserInfoForPost(postAuthor.value).then((res) => {
    userProfile.value = getImgPrefix(res.object.avatar)
    userNickName.value = res.object.userNickname
})
// 加载图片队列
getImgList(postId.value).then((res) => {
    res.object.forEach(obj => {
        imgList.value.push({ imgsrc: getImgPrefix(obj.pictureSrc) })
    })
})

const handleLike = () =>{
    likePost(postId.value).then((res) => {
        likeImgSrc.value = 'src/components/icons/like_hover.png';
        if(res.success){
            postLikes.value += 1;
        }
    })
}

</script>

<style scoped>
.postCard{
    height:auto;
    width:95%;
    margin:2vh;
    transition: all 0.4s ease-in-out;
}
.postImg{
    height:23vh;
    width:31%;
    border-radius: 4px;
    margin-right: 1vh;
    object-fit: cover;
    object-position: center center;
    cursor: zoom-in;
}
.card_header{
    font-size: 18px;
    display: flex;
    align-items: center;
    padding: -10px -8px;
}
.card_content{
    font-size: 16px;
    margin-bottom: 1vh;
}
.postFooter{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.post_foot_img{
    height: 24px;
    width: 24px;
    margin-right: 0.7vh;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}

.username_title{
    font-size: 18px;
}
.postTime_tiele{
    font-size: 14px;
    font-family: 'consolar';
    color: #73767a;
}
</style>
